<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }
        .error {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
            color: #ff4d4f;
        }
        .menu-item {
            padding: 8px 16px;
            margin: 4px 0;
            background: #fafafa;
            border-left: 3px solid #1890ff;
        }
        .menu-child {
            margin-left: 20px;
            border-left-color: #52c41a;
        }
        button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #40a9ff;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 4px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DataPlexus 菜单API测试</h1>
        
        <div>
            <button onclick="testLogin()">1. 测试登录</button>
            <button onclick="testMenu()">2. 测试菜单API</button>
            <button onclick="testAll()">3. 完整测试</button>
        </div>
        
        <div id="status"></div>
        <div id="result"></div>
    </div>

    <script>
        let authToken = '';
        
        function showStatus(message, type = 'success') {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<div class="status ${type}">${message}</div>`;
        }
        
        function showResult(data) {
            document.getElementById('result').textContent = JSON.stringify(data, null, 2);
        }
        
        async function testLogin() {
            try {
                showStatus('正在测试登录...', 'info');
                
                const response = await fetch('http://localhost:8000/api/v1/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    authToken = data.data.access_token;
                    showStatus('✅ 登录成功！', 'success');
                    showResult(data);
                } else {
                    const error = await response.text();
                    showStatus('❌ 登录失败: ' + error, 'error');
                    showResult({error});
                }
            } catch (error) {
                showStatus('❌ 登录请求失败: ' + error.message, 'error');
                showResult({error: error.message});
            }
        }
        
        async function testMenu() {
            if (!authToken) {
                showStatus('❌ 请先登录获取token', 'error');
                return;
            }
            
            try {
                showStatus('正在测试菜单API...', 'info');
                
                const response = await fetch('http://localhost:8000/api/v1/routes/menu', {
                    headers: {
                        'Authorization': `Bearer ${authToken}`,
                        'Content-Type': 'application/json',
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    showStatus('✅ 菜单API调用成功！', 'success');
                    showResult(data);
                    renderMenu(data.data);
                } else {
                    const error = await response.text();
                    showStatus('❌ 菜单API调用失败: ' + error, 'error');
                    showResult({error});
                }
            } catch (error) {
                showStatus('❌ 菜单API请求失败: ' + error.message, 'error');
                showResult({error: error.message});
            }
        }
        
        function renderMenu(menuData) {
            const resultDiv = document.getElementById('result');
            let menuHtml = '<h3>菜单结构预览:</h3>';
            
            function renderMenuItem(item, level = 0) {
                const indent = '  '.repeat(level);
                const className = level > 0 ? 'menu-child' : 'menu-item';
                menuHtml += `<div class="${className}">${indent}📁 ${item.display_name} (${item.path})</div>`;
                
                if (item.children && item.children.length > 0) {
                    item.children.forEach(child => renderMenuItem(child, level + 1));
                }
            }
            
            menuData.forEach(item => renderMenuItem(item));
            resultDiv.innerHTML = menuHtml + '<hr><pre>' + JSON.stringify(menuData, null, 2) + '</pre>';
        }
        
        async function testAll() {
            await testLogin();
            if (authToken) {
                setTimeout(testMenu, 1000);
            }
        }
        
        // 页面加载时显示说明
        showStatus('请点击按钮开始测试。建议先测试登录，然后测试菜单API。', 'info');
    </script>
</body>
</html>
